<template>
	<div class="rotate">
		<div class="rot">
			<div class="pan pst">
				<img src="../../../assets/disc.png"/>
			</div>
			<div class="pan pst">
				<img src="../../../assets/disc_light.png"/>
			</div>
			<div class="songimg"  :class="{acircling:isbrk}" @click="brk()">
				<img src="../../../assets/109951163650724201.jpg"/>
			</div>
		</div>
		<div class="btn pst">
			<img src="../../../assets/play.png"/>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				isbrk:false
			}
		},
		methods : {
			brk () {
				this.isbrk=!this.isbrk
				console.log(this.isbrk)
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem
	}
	
	@keyframes circling{
			0% {
		    -webkit-transform: rotate(0deg);
		    transform: rotate(0deg);
		}
			100% {
		    -webkit-transform: rotate(1turn);
		    transform: rotate(1turn);
		}
	}
	.rotate{
	position: relative;
	.rot{
		transform: rotate(50deg);
		position: relative;
		height: r(480px);
	}
	.pst{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.pan{
		width: r(480px);
		height: r(480px);
		img{
			width: 100%;
		}
	}
	.songimg{
		width: r(292px);
		height: r(292px);
		overflow: hidden;
		border-radius: 50%;
		position: absolute;
		top: r(90px);
		left: r(175px);
		img{
			width: 100%;
		}
	}
	.acircling {
	    -webkit-animation: circling 20s infinite linear;
	    animation: circling 20s infinite linear;
	}
	.btn{
		width: r(100px);
		height: r(100px);
		img{
			width: 100%;
		}
	}
}
.rotate:after {
    content: " ";
    position: absolute;
    top: r(-100px);
    left: r(300px);
    z-index: 5;
    width: r(200px);
    height: r(220px);
    background: url(//s3.music.126.net/m/s/img/needle.png?702cf6d…) no-repeat;
    background-size: contain;
}
</style>